<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>订货郎注册</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/common/common.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/register.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
</head>
<body>
    <header>
        <ul class="clearfix">
            <li><img src="${pageContext.request.contextPath}/img/logo.png"/></li>
            <li class="register"><a href="#">注册账号</a></li>
        </ul>
    </header>
    <div id="main">
    	
        <div class="center">
            <h4>10秒注册，订货效率翻倍</h4>
            <p class="error-mpt"></p>
            <ul class="vali">
               <li class="phone"><input type="text" maxlength="11" name="phone" placeholder="手机号" id="phone"/></li>
               <li class="get"><input type="text" name="number" placeholder="验证码" id="number"/><input type="hidden" id="checkNumber"/><button id="getNumber">获取验证码</button></li>
               <li class="next"><button id="next">下一步</button></li>
               <li class="toLogin"><a href="${pageContext.request.contextPath}/distributorUser/gotoLogin">已有账号，去登录</a></li>
            </ul>
            
            <ul class="second hide">
               <li class="phone"><input type="text" maxlength="11" id="rePhone" name="rePhone" value="" readonly/></li>
               <li class="pwd"><input type="password" name="password" id="password" placeholder="密码"/></li>
               <li class="isAgree"><i id="agree" class="hide"></i><a href="#">我已同意服务条款，以及隐私政策</a></li>
               <li class="next"><button id="next_1" disabled="disabled">下一步</button></li>
            </ul>
            <ul class="msg hide">
                <li class="company"><input type="text" id="cpName" name="cpName" onblur="checkName()" placeholder="公司名称"/></li>
                <li class="hangye">
                    <div class="type">
                        <input id="chose" type="text" placeholder="所属行业" readonly/>
                        <ul class="item hide">
                        	<c:forEach items="${requestScope.industryList}" var="industry">
	                            <li data-id="${industry.name}">${industry.name}</li>
                            </c:forEach>
                        </ul>
                    </div>
                </li>
                <li class="done"><button id="complete">完成</button></li>
                <li class="toLogin"><a href="${pageContext.request.contextPath}/distributorUser/gotoLogin">已有账号，去登录</a></li>
            </ul>
            
        </div>
        
    </div>
    <footer>
        <p>Copyright © 2017 dico.com</p>
    </footer>
    <div id="mask" style="z-index: 5" class="hide">
	    <div class="alert" style="z-index: 10">
	        <p></p>
	        <div></div>
	    </div>
	</div>
    <script>
        $("#main").on("click",".second .isAgree",function(e){
            e.preventDefault();
            $(this).children("i").toggleClass("hide");
            $("#agree").hasClass("hide") ? $("#next_1").attr("disabled","disabled") : $("#next_1").removeAttr("disabled");
        });
        
        $("#phone").blur(function(){
        	
        	if(!(/^1[34578]\d{9}$/.test($("#phone").val()))){
                $('.error-mpt').css('visibility','visible').html('请输入正确的手机号码');
            }else{
            	$('.error-mpt').css('visibility','hidden');
            }
        })
        //发送验证码倒计时
        $("#getNumber").click(function(){
        	var phone = $("#phone").val();
        	if(!(/^1[34578]\d{9}$/.test(phone))){
        		$('.error-mpt').css('visibility','visible').html('请输入正确的手机号码');
        	}else{
		    	$.ajax({
		    		type:"get",
		    		url:"${pageContext.request.contextPath}/distributorUser/checkPhone",
		    		data:{"phone":phone},
		    		success:function(data){
		    			if(data == 0){
		    				
		    				$(this).css("background-color","#F5C53A");
	    			        $(this).attr("disabled",true);
	    			        //alert(phone);
	    			        var s=60;
	    			        var timer=setInterval(function(){
	    			            s--;
	    			            $("#getNumber").html(s+"秒重新发送");
	    			            if(s==0){
	    			                clearInterval(timer);
	    			                $(this).html("获取验证码");
	    			                $(this).css("background-color","#F5D989");
	    			                $(this).attr("disabled",false);
	    			            }
	    			        }.bind(this),1000);
	    			        $.ajax({
	    			        	type:"get",
	    			        	url:"${pageContext.request.contextPath}/distributorUser/sendMessage",
	    			        	data:{"phone":phone},
	    			        	success:function(data){
	    			        		$("#checkNumber").val(data);
	    			        	}
	    			        })
		    			}else if(data == 1){
		    				$('.error-mpt').css('visibility','visible').html('发送失败,手机号已存在');
		    			}
		    			
		    		}
		    	})
        	}
        });
        function checkName(){
        	var cpName = $("#cpName").val();
        	
        	$.ajax({
        		type:"post",
        		url:"${pageContext.request.contextPath}/distributorUser/checkCpName",
        		data:{"cpName":cpName},
        		dataType:"json",
        		success:function(data){
        			if(data == 1){
        				$('.error-mpt').css('visibility','visible').html('公司名称已存在');
        				$("#complete").attr("disabled","disabled");
        			}else{
        				$("#complete").removeAttr("disabled");
        			}
        			/* var abc = eval(data);
        			for ( var i in abc) {
						alert(i);
						alert(abc[i]);
					} */
        		}
        	})
        }
        //下拉框
        $("#chose,#provinceName,#cityName").click(function(){
            var input=$(this);
            var ul=$(this).next("ul");
            ul.toggleClass('hide');
            ul.on("click","li",function(){
                input.val($(this).html());
                ul.addClass("hide");
            })
        });
        //下一步
        $("#next").click(function(){
        	var number = $("#number").val();
	    	var checkNumber = $("#checkNumber").val();
	    	if(number == checkNumber && number != ""){
	    		var phone = $("#phone").val();
	        	$("#rePhone").val(phone);
	            $(this).parent().parent("ul.vali").addClass("hide").next("ul.second").removeClass("hide");
	    	}else{
	    		$('.error-mpt').css('visibility','visible').html('验证码输入错误');
	    	}
        })
        
        $("#next_1").click(function(){
            $(this).parent().parent("ul.second").addClass("hide").next("ul.msg").removeClass("hide");
        })
        $("#complete").click(function(){
        	var phone = $("#rePhone").val();
        	var password = $("#password").val();
        	var cpName = $("#cpName").val();
        	var industry = $("#chose").val();
        	
        	$.ajax({
        		type : "post",
        		url : "/DistributorSystem/distributorUser/insertDistributorUserAndDistributor",
        		data : {"phone":phone,
        				"password":password,
        				"cpName":cpName,
        				"industry":industry},
        		dataType : "json",
        		success : function(data){
        			if(data.isSuccess == 1){
        				$('#mask').children('div').children('div').html("注册成功");
						$("#mask").removeClass("hide");
						window.setTimeout("tiaozhuan()",1000); 
        			}else{
        				$('#mask').children('div').children('div').html("注册失败");
						$("#mask").removeClass("hide");
						window.setTimeout("fail()",1000); 
        			}
        		}
        	})
        })
        
        function tiaozhuan(){
        	window.location.href = "/DistributorSystem/distributorUser/gotoLogin";
        }
        function fail(){
        	window.location.href = "/DistributorSystem/distributorUser/gotoRegister";
        }
    </script>
</body>
</html>